<template>
  <div>
    <el-table-column :label="columnHeader.label" align="center">
      <template v-for="(item, index) in columnHeader.children">
          <el-table-column
          v-if="!item.slot && !item.children"
          :label="item.label"
          :key="item.id"
          :width="item.width"
          align="center"
          :prop="item.prop"
        >
        </el-table-column>
        <el-table-column
          v-else-if="!item.children && item.slot"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot="header">
            <div>
              <span v-if="item.must" class="header-must">*</span>
              <span>{{ item.label }}</span>
            </div>
          </template>
          <template slot-scope="scope" v-if="item.slot">
            <div>
              <slot
                :name="item.prop"
                v-bind:row="scope.row"
                v-if="item.slot"
              ></slot>
            </div>
          </template>
        </el-table-column>
        <tableColumnChild
          v-else-if="item.children"
          :key="item.id"
          :columnHeader="item"
        >
        </tableColumnChild>
      </template>
    </el-table-column>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.columnHeader);
  },
  name: "tableColumnChild",
  props: {
    columnHeader: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>